<template>
<div class="content">
  <div class="driver">
    <div class="driverImg"></div>
    <div class="driverDet">
      <span>王师傅</span>
      <span>五星司机</span>
      <div class="driverTips">
        <em>面包车</em>
        <em>100单</em>
        <em>陕A***12</em>
      </div>
    </div>
  </div>
  <div class="score-tit">开始评价:</div>
  <!--<div class="ping-all">-->
    <!--<button class='ping-btn {{!status[0]&&"not_active"}}' @cilck="selectHandler" data-status="0" >服务态度好</button>-->
    <!--<button class='ping-btn {{!status[1]&&"not_active"}}' @cilck="selectHandler" data-status="1" >质量高</button>-->
    <!--<button class='ping-btn {{!status[2]&&"not_active"}}' @cilck="selectHandler" data-status="2" >发货快</button>-->
    <!--<button class='ping-btn {{!status[3]&&"not_active"}}' @cilck="selectHandler" data-status="3">服务态度不好</button>-->
    <!--<button class='ping-btn {{!status[4]&&"not_active"}}' @cilck="selectHandler" data-status="4">质量不高</button>-->
    <!--<button class='ping-btn {{!status[5]&&"not_active"}}' @cilck="selectHandler" data-status="5">发货慢</button>-->
    <!--<div style='clear:both;' bindtap="server_handler" ></div>-->
  <!--</div>-->
  <textarea class="score-text" placeholder="请认真评价">
  </textarea>
  <div class="score-btn">提交</div>
</div>
</template>
<script>
  export default {
    data () {
      return {
        // star: 0,
        // userStars: [
        //   { url: '../../../../../static/img/selected.png'},
        //   { url: '../../../../../static/img/normal.png'},
        //   { url: '../../../../../static/img/normal.png'},
        //   { url: '../../../../../static/img/normal.png'},
        //   { url: '../../../../../static/img/normal.png'}
        // ],
        // txt: [
        //   '非常不满意',
        //   '不满意',
        //   '一般',
        //   '满意',
        //   '非常满意，无可挑剔'
        // ],
        // server: true,
        // quality: true,
        // send: true,
        // un_server: true,
        // un_quality: true,
        // un_send: true,
        // status:[false, false, false, false, false, false]
      }
    },
    methods: {
      // starTap (e) {
      //   let index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
      //   let tempUserStars = this.data.userStars; // 暂存星星数组
      //   let len = tempUserStars.length; // 获取星星数组的长度
      //   for (let i = 0; i < len; i++) {
      //     if (i <= index) { // 小于等于index的是满心
      //       tempUserStars[i].url = '../../../../../static/img/selected.png'
      //     } else { // 其他是空心
      //       tempUserStars[i].url = '../../../../../static/img/normal.png'
      //     }
      //   }
      //   let txt = this.data.txt
      //   let first
      //   let star = this.data.star
      //   for (let a = 0; a < txt.length; a++) {
      //     if (a === index) { // 小于等于index的是满心
      //       first = txt[a]
      //       star = a + 1
      //     }
      //   }
      //   // 重新赋值就可以显示了
      //   this.userStars = tempUserStars
      //   this.first = first
      //   this.star = star
      //
      // },
      // selectHandler (e) {
      //   console.log(e.currentTarget.dataset.status)
      //   if (e.currentTarget.dataset.status === '0') {
      //     if (this.data.status[0] === false && this.status[3] === false) {
      //       this.status[0] = true
      //     } else if (this.status[0] === true && this.status[3] === false) {
      //       this.status[0] = false
      //     }
      //   }
      //   if (e.currentTarget.dataset.status === '3') {
      //     if (this.status[3] === false && this.status[0] === false) {
      //       this.status[3] = true
      //     } else if (this.status[3] === true && this.status[0] === false) {
      //       this.status[3] = false
      //     }
      //   }
      //   if (e.currentTarget.dataset.status === '1') {
      //     if (this.status[1] === false && this.status[4] === false) {
      //       this.status[1] = true
      //     } else if (this.status[1] === true && this.status[4] === false) {
      //       this.status[1] = false
      //     }
      //   }
      //   if (e.currentTarget.dataset.status === '4') {
      //     if (this.status[4] === false && this.status[1] === false) {
      //       this.status[4] = true
      //     } else if (this.status[4] === true && this.status[1] === false) {
      //       this.status[4] = false
      //     }
      //   }
      //   if (e.currentTarget.dataset.status === '2') {
      //     if (this.status[2] === false && this.status[5] === false) {
      //       this.status[2] = true
      //     } else if (this.status[2] === true && this.status[5] === false) {
      //       this.status[2] = false
      //     }
      //   }
      //   if (e.currentTarget.dataset.status === '5') {
      //     if (this.status[5] === false && this.status[2] === false) {
      //       this.status[5] = true
      //     } else if (this.status[5] === true && this.status[2] === false) {
      //       this.status[5] = false
      //     }
      //   }
      //   console.log(this.status)
      // }
    }
  }
</script>
<style scoped>
  .content{
    width: 710rpx;
    margin: 0 auto;
    font-size: 28rpx;
  }
  .driver{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 35rpx 0 84rpx 0;
    border-bottom: 1rpx solid #e3e3e3;
    position: relative;
  }
  .driverImg{
    width: 122rpx;
    height: 122rpx;
    border-radius: 50%;
    background-color: dimgray;
  }
  .driverDet{
    flex: 1;
  }
  .driverDet span:nth-child(1){
    font-size: 28rpx;
    color: #1a2636;
    padding: 0 30rpx;
  }
  .driverDet span:nth-child(2){
    font-size: 20rpx;
    color: #f7443f;
  }
  .driverTips{
    position: absolute;
    bottom: 60rpx;
  }
  .driverTips em{
    line-height: 36rpx;
    padding: 0 26rpx;
    border: 1rpx solid #e8473d;
    border-radius: 60rpx;
    font-size: 20rpx;
    color: #e8473d;
    display: inline;
    margin: 0 12rpx;
  }
.score-tit{
  padding: 35rpx 0 72rpx 0;
}
  .score-text{
    width: 650rpx;
    height: 330rpx;
    padding: 40rpx 30rpx;
    background-color: #f7f7f7;
  }
  .score-btn{
    width: 300rpx;
    height: 60rpx;
    background-color: #ed493d;
    color: #fff;
    margin: 0 auto;
    line-height: 60rpx;
    text-align: center;
    border-radius: 25rpx;
    margin-top: 130rpx;
  }
</style>
